﻿@model VirtualOrg.Mobile.Models.OrgModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<a href='@Url.Action("List","Vorg")' data-icon="back"><input type="submit" value="Back" data-icon="back" style="float: right;" /></a>
@using (Html.BeginForm())
{
    <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="a">
        <li data-role="list-divider">Create New V-Org </li>
        <li style="font-size: 11px; color: Red;">
            @Html.ValidationSummary(true, "Error while creating v-org.")
        </li>
        <li>
            @Html.LabelFor(model => model.Title)
            @Html.TextBoxFor(m => m.Title, new { required = "required" })
            @Html.ValidationMessageFor(model => model.Title)
        </li>
        <li>
            @Html.LabelFor(model => model.Tagline)
            @Html.TextBoxFor(m => m.Tagline, new { required = "required" })
            @Html.ValidationMessageFor(model => model.Tagline)
        </li>
        <li>
            @Html.LabelFor(model => model.Description)
            @Html.TextAreaFor(m => m.Description, new { required = "required" })
            @Html.ValidationMessageFor(model => model.Description)
        </li>
        <li>
            @Html.LabelFor(model => model.Category)
            @Html.DropDownListFor(m => m.Category, (List<SelectListItem>)ViewData["catlist"], new { required = "required" })
            @Html.ValidationMessageFor(model => model.Category)
        </li>
        <li>
            @Html.LabelFor(model => model.SubCategory)
            @Html.DropDownListFor(m => m.SubCategory, (List<SelectListItem>)ViewData["subcatlist"], new { required = "required" })
            @Html.ValidationMessageFor(model => model.SubCategory)
        </li>
    </ul>
    <input type="submit" value="Create" data-theme="a" />
}
@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
    function GetSubCategory(abbr) {
        $.ajax({
            url: '@Url.Action("GetSubCategory", "VOrg")',
            data: {categoryId: abbr},
            dataType: "json",
            type: "POST",
            error: function () {
                
            },
            success: function(data) {
                var items = "";
                $.each(data, function(i, item) {
                    items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });

                $("#SubCategory").html(items);
            }
        });
    }

    $(document).ready(function(){
        $("#Category").change(function() {
            var abbr = $("#Category").val();
            GetSubCategory(abbr);
        });
    });
    </script>
}
